<template>
  <div class="info">
    <el-row :gutter="20" class="statistics">
      <el-col :span="6"><div class="grid-content bg-purple">今日点击量</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">在线交易量</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">未完成订单</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">统计四</div></el-col>
    </el-row>

    <el-row>
      <el-col :span="16">
        <el-upload
          title="上传头像"
          class="photo-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handlePhotoSuccess"
          :before-upload="beforePhotoUpload">
          <img v-if="imageUrl" :src="imageUrl" class="phone">
          <i v-else class="el-icon-plus photo-uploader-icon"></i>
        </el-upload>
        <div class="shop-info">

          <el-row>
            <el-col :span="6">用户名</el-col>
            <el-col :span="16">admin</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">账号状态</el-col>
            <el-col :span="16">
              <el-tag type="success">正常</el-tag>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">注册时间</el-col>
            <el-col :span="16">
              2016-12-10
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">认证等级</el-col>
            <el-col :span="16">
              <el-rate
                v-model="value3"
                show-text>
              </el-rate>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">积分</el-col>
            <el-col :span="16">12345</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">评级</el-col>
            <el-col :span="16">
              <el-rate
                v-model="value3"
                show-text>
              </el-rate>

            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">店铺名称</el-col>
            <el-col :span="14"><el-input size="small">某某金币</el-input></el-col>
          </el-row>
          <el-row>
            <el-col :span="6">联系QQ</el-col>
            <el-col :span="14"><el-input size="small">12123131311</el-input></el-col>
          </el-row>
          <el-row>
            <el-col :span="6">微信</el-col>
            <el-col :span="14"><el-input size="small">12123131311</el-input></el-col>
          </el-row>
          <el-row>
            <el-col :span="6">绑定手机</el-col>
            <el-col :span="14">1212***1311</el-col>
            <el-col :span="3" offset="1">
              <el-button size="mini" type="primary"><i class="el-icon-edit"></i></el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">服务内容</el-col>
            <el-col :span="14">3099，7505，2048，5628，597，797，2380</el-col>
            <el-col :span="3" offset="1">
              <el-button size="mini" type="primary"><i class="el-icon-edit"></i></el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">享有特权</el-col>
            <el-col :span="16">Kvv指数，自动调货，在线交易</el-col>
          </el-row>

        </div>

      </el-col>

      <el-col :span="8">
        <el-upload
          title="上传店面图"
          class="cover-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="cover">
          <i v-else class="el-icon-plus cover-uploader-icon"></i>
        </el-upload>

      </el-col>

    </el-row>
    <el-row>
      <el-col :span="4">店铺简介</el-col>
      <el-col :span="12">
        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10}">啊速度建立科技大厦卡了距离喀什的就角度思考逻辑了昆仑山大家来看老实交待</el-input>
      </el-col>
      <el-col :span="4" offset="2">
        <el-button size="small" type="primary">保存</el-button>
      </el-col>
    </el-row>


  </div>
</template>

<script>
  export default {
    name: 'index',
    data () {
      return {
        imageUrl: ''
      }
    },
    methods: {
      handleAvatarSuccess (res, file) {
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      beforeAvatarUpload (file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      },
      handlePhotoSuccess (res, file) {
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      beforePhotoUpload (file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      }
    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .statistics{
    margin-bottom: 36px;
  }
  .grid-content{
    height: 80px;
    background-color: #666;
  }
  .shop-info {
    margin-top: 20px;
    .el-col {
      line-height: 36px;
    }
    .el-rate {
      height: 36px;
      line-height: 36px;
      /*margin-top: 6px;*/
    }

  }

  .cover-uploader {
    float: right;

    border: 1px dashed #d9d9d9;
    width: 168px;
    height: 238px;
    &:hover {
      border-color: #20a0ff;
    }
  }

  .photo-uploader {
    border: 1px dashed #d9d9d9;
    width: 60px;
    height: 60px;
    &:hover {
      border-color: #20a0ff;
    }
  }

  .cover-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 168px;
    height: 238px;
    line-height: 238px;
    text-align: center;
  }

  .photo-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }

  .cover {
    width: 100%;
    height: 100%;
    display: block;
  }

  .photo {
    width: 100%;
    height: 100%;
    display: block;
  }

</style>
